<template>
  <div class="container border-2 border-gray-400 border-solid">
    <h1>这是基于Vue的页面（父页面）</h1>
    <p><span class="text-red-500">传递的数据：</span>{{ message }}</p>
    <div class="w-full h-full">
      <iframe
        class="w-full h-full"
        ref="parentPage"
        scrolling="no"
        src="http://localhost:3001"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "vue page data",
    };
  },
  mounted() {
    console.log("parent page mounted");
    window.addEventListener("message", (e) => {
      if (e.data.retcode === 200) {
        this.$refs.parentPage.contentWindow.postMessage(this.message, "*");
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 100px);
}
</style>
